<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 手机页面布局</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  html,body{
    /*position: absolute;*/
    width: 100%; 
    height: 100%;
    
  }
  .wrap{
    height: 100%;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #f0f0f0;
  }
  .box{
    display: flex; 
    display: -webkit-flex; /* Safari */
    width: 100%; 
    height: 100%;
    flex-direction:column;
  }
  .borderOne{border: 1px solid #ccc;}
  .topBox,.botBox{height: 50px;}
  .content{flex: 1;}
  </style>
</head>

<body>
<div class="wrap">
  <div class="box">
    <div class="topBox borderOne">头部内容, 高度50</div>
    <div class="content borderOne">中间内容, 高度自适应</div>
    <div class="botBox borderOne">底部内容, 高度50</div>
  </div>
</div>

</body>

</html>
